import React, { useState, useEffect } from "react";
import Web3 from "web3";
import TaskContract from "./contracts/Task.json";

const web3 = new Web3(Web3.givenProvider);

function App() {
  const [tasks, setTasks] = useState([]);
  const [desc, setDesc] = useState("");
  const [bonus, setBonus] = useState(0);
  const [selectedTask, setSelectedTask] = useState(null);
  const [comment, setComment] = useState("");
  const [confirmStatus, setConfirmStatus] = useState(null);

  useEffect(() => {
    const loadTasks = async () => {
      const networkId = await web3.eth.net.getId();
      const taskContract = new web3.eth.Contract(
        TaskContract.abi,
        TaskContract.networks[networkId].address
      );
      const allTasks = await taskContract.methods.getAllTasks().call();
      setTasks(allTasks);
    };
    loadTasks();
  }, []);

  const handleIssue = async () => {
    const accounts = await web3.eth.getAccounts();
    const networkId = await web3.eth.net.getId();
    const taskContract = new web3.eth.Contract(
      TaskContract.abi,
      TaskContract.networks[networkId].address
    );
    await taskContract.methods.issue(desc, bonus).send({ from: accounts[0] });
    setDesc("");
    setBonus(0);
    // Refresh tasks
    const allTasks = await taskContract.methods.getAllTasks().call();
    setTasks(allTasks);
  };

  const handleTake = async (index) => {
    const accounts = await web3.eth.getAccounts();
    const networkId = await web3.eth.net.getId();
    const taskContract = new web3.eth.Contract(
      TaskContract.abi,
      TaskContract.networks[networkId].address
    );
    await taskContract.methods.take(index).send({ from: accounts[0] });
    // Refresh tasks
    const allTasks = await taskContract.methods.getAllTasks().call();
    setTasks(allTasks);
  };

  const handleCommit = async (index) => {
    const accounts = await web3.eth.getAccounts();
    const networkId = await web3.eth.net.getId();
    const taskContract = new web3.eth.Contract(
      TaskContract.abi,
      TaskContract.networks[networkId].address
    );
    await taskContract.methods.commit(index).send({ from: accounts[0] });
    // Refresh tasks
    const allTasks = await taskContract.methods.getAllTasks().call();
    setTasks(allTasks);
  };

  const handleConfirm = async (index) => {
    const accounts = await web3.eth.getAccounts();
    const networkId = await web3.eth.net.getId();
    const taskContract = new web3.eth.Contract(
      TaskContract.abi,
      TaskContract.networks[networkId].address
    );
    await taskContract.methods
      .confirm(index, comment, confirmStatus)
      .send({ from: accounts[0] });
    // Refresh tasks
    const allTasks = await taskContract.methods.getAllTasks().call();
    setTasks(allTasks);
  };

  return (
    <div className="App">
      <h1>Task Contract</h1>
      <h2>Issue a new task:</h2>
      <label>
        Description:
        <input
          type="text"
          value={desc}
          onChange={(e) => setDesc(e.target.value)}
        />
      </label>
      <br />
      <label>
        Bonus:
        <input
          type="number"
          value={bonus}
          onChange={(e) => setBonus(e.target.value)}
        />
      </label>
      <br />
      <button onClick={handleIssue}>Issue Task</button>
      <hr />
      <h2>All Tasks:</h2>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            <strong>Description:</strong> {task.desc} <br />
            <strong>Bonus:</strong> {task.bonus} <br />
            <strong>Status:</strong>{" "}
            {task.status === "0"
              ? "Not started"
              : task.status === "1"
              ? "Accepted"
              : task.status === "2"
              ? "Submitted"
              : task.status === "3"
              ? "Confirmed"
              : ""}
            <br />
            {task.status === "0" && (
              <button onClick={() => handleTake(index)}>Take Task</button>
            )}
            {task.status === "1" && (
              <button onClick={() => handleCommit(index)}>Submit Task</button>
            )}
            {task.status === "2" (
               <div>
               <input
               type="text"
               placeholder="Enter your comment..."
               value={comment}
               onChange={(e) => setComment(e.target.value)}
               />
               <br />
               <label>
               Confirm Status:
               <select onChange={(e) => setConfirmStatus(e.target.value)}>
               <option value="" disabled selected>
               Select status...
               </option>
               <option value="1">Accepted</option>
               <option value="2">Rejected</option>
               </select>
               </label>
               <br />
               <button onClick={() => handleConfirm(index)}>Confirm Task</button>
               </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;